<template>
  <div :key="item.key" class="row-item">
    <div v-if="item.label" class="row-item-label">
      <!-- <span>{{ item.label }}</span> -->
      <ToolTip :content="item.label" class="content" />
      <div v-if="item.type === 'priceTime' && showExpire"><span class="expire-tag">过期</span></div>
      <div v-if="item.type === 'costField' && (item.costType || item.costType === 0)"><span>
        ({{ item.costType === 1?'利润分成':'固定价格' }})
      </span></div>
      <span>：</span>
    </div>
    <div class="row-item-text">
      <template v-if="item.type === 'userArr'">
        <CheckUserInfo
          v-if="getValue(scope, item) && getValue(scope, item).length"
          :user-list="getValue(scope, item)"
          :multiple="getValue(scope, item).length > 1"
          :user-id="getValue(scope, item).length === 1?getValue(scope, item)[0][item.keyName || 'id']:null"
          :label="getValue(scope, item).length === 1?getValue(scope, item)[0][item.labelName || 'userName']:null"
          :label-name="item.labelName || 'userName'"
          :key-name="item.keyName || 'id'"
        />
        <div v-else>--</div>
      </template>
      <template v-else-if="item.type === 'user'">
        <CheckUserInfo v-if="scope.row[item.keyName]" :label="scope.row[item.labelName]" :user-id="scope.row[item.keyName]" />
        <div v-else >{{ scope.row[item.labelName] || '--' }}</div>
      </template>
      <template v-else-if="item.type === 'time'">
        <span v-if="getValue(scope, item)">{{ getValue(scope, item) | format(item.format || 'YYYY/MM/DD HH:mm') }}</span>
        <span v-else>--</span>
      </template>
      <template v-else-if="item.type === 'rangeTime'">
        <span v-if="scope.row[item.parentField][item.start]">{{ scope.row[item.parentField][item.start] | format(item.format || 'YYYY/MM/DD HH:mm') }}-{{ scope.row[item.parentField][item.end] | format(item.format || 'YYYY/MM/DD HH:mm') }}</span>
        <span v-else>--</span>
      </template>
      <template v-else-if="item.type === 'related'">
        <div v-if="scope.row[item.parentField][item.key]" class="link" @click="toDetail(scope.row[item.parentField][item.key], item)">
          {{ scope.row[item.parentField][item.key][item.snKey] }}
        </div>
        <span v-else>--</span>
      </template>
      <template v-else-if="item.type === 'sign'">
        <el-tooltip v-if="scope.row.signDetailStatus || scope.row.signDetailStatus === 0" :open-delay="800" placement="top-start">
          <div slot="content" class="tooltip-content">
            {{ `${scope.row.resourceName}(${signStatusFilter(scope.row.signDetailStatus)})` }}
          </div>
          <StatusText :color="signStatusColor(scope.row.signDetailStatus)" :text="signStatusFilter(scope.row.signDetailStatus)" />
        </el-tooltip>
        <div v-else>--</div>
      </template>
      <template v-else-if="item.type === 'isExpired'">
        <template v-if="hasContract(scope.row)">
          <div v-if="scope.row.isExpired" style="color: #FF4E5F">已到期</div>
          <div v-else-if="scope.row.expiredDuration || scope.row.expiredDuration === 0">距离到期日：<span :style="expiredTypeClass(scope.row.expiredDuration)">{{ scope.row.expiredDuration !== 9999 ? scope.row.expiredDuration : '--' }}</span> 天</div>
          <span v-else>距离到期日：-- 天</span>
        </template>
        <div v-else>{{ handleContent(scope.row) }}</div>
      </template>
      <div v-else-if="item.type === 'priceTime'">
        <div v-if="scope.row.priceTime && scope.row.priceTime.startTime && scope.row.priceTime.endTime" style="white-space: normal;">
          {{ scope.row.priceTime.startTime | format('YYYY/MM/DD') }} - {{ scope.row.priceTime.endTime| format('YYYY/MM/DD') }}
        </div>
        <div v-else>--</div>
      </div>
      <div v-else-if="item.type === 'dynamicKey' || item.type === 'costField'" style="width: 100%;">
        <ToolTip :content="handleDynamicKeyContent(item)" />
      </div>
      <div v-else-if="item.type==='profitSharingRatio'">
        <div v-if="getValue(scope, item) || getValue(scope, item) === 0">
          公司：{{ `${getValue(scope, item)}%` }}，达人：{{ `${math.subtract(100, getValue(scope, item))}%` }}
        </div>
        <div v-else>--</div>
      </div>

      <!-- 最新签约状态 -->
      <div v-else-if="item.key === 'nowSignStatusLink'" class="nowSignStatus-container">
        <div class="label" @click="toList('signUp')">查看所有签约</div>
        <div class="separator">/</div>
        <div class="label" @click="toList('termination')">查看所有解约</div>
      </div>
      <ToolTip v-else :content="getValue(scope, item)" />
    </div>
  </div>
</template>
<script>
import { format } from '@/filters/date';
import { signStatusFilter } from '@/filters/status';
import { expiredTypeClass } from '@/views/signUp/components/status';
import { hasRouteAuth } from '@/utils/permission';
import math from '@/utils/math';
export default {
  filters: { format },
  props: {
    item: {
      type: Object,
      default: () => { return {}; }
    },
    column: {
      type: Object,
      default: () => { return {}; }
    },
    scope: {
      type: Object,
      default: () => { return {}; }
    }
  },
  data() {
    return {
      math
    };
  },
  computed: {
    showExpire() {
      // 是否展示过期图标
      if (!this.scope.row.priceTime || !this.scope.row.priceTime.endTime) return false;
      let endTime = this.scope.row.priceTime.endTime;
      endTime = endTime.toString().length === 10 ? endTime * 1000 : endTime;
      return endTime < new Date().getTime();
    }
  },
  methods: {
    hasRouteAuth,
    signStatusFilter,
    expiredTypeClass,
    signStatusColor(status) {
      const signStatus = [1, 2, 5, 6];// 已签约的状态
      return signStatus.includes(status) ? '#31CC9C' : '#406EFF';
    },
    // 根据签约状态展示对应内容
    hasContract({ signDetailStatus }) {
      return [2, 5].includes(signDetailStatus);// 已签约、已续约
    },
    handleContent({ signDetailStatus }) {
      switch (signDetailStatus) {
        case 1:return '无合同';
        case 6:return '无新合同';
        default:return '--';
      }
    },
    handleDynamicKeyContent(item) {
      let val = item.value;
      if (item.filter) {
        val = item.filter(item.value);
      }
      if (item.unit && (val || val === 0)) {
        val = val + item.unit;
      }
      return val;
    },
    getValue(scope, item) {
      let value = '';
      if (item.secondParentField) {
        if (!scope.row[item.parentField] || !scope.row[item.parentField][item.secondParentField]) return '';
        value = scope.row[item.parentField][item.secondParentField][item.key];
      } else if (item.parentField) {
        value = scope.row[item.parentField] ? scope.row[item.parentField][item.key] : '';
      } else {
        value = scope.row[item.key];
      }
      if (item.filter && (value || value === 0)) {
        return item.filter(value);
      }
      if (item.type === 'userArr') { return value || []; }
      return value || value === 0 ? value + (item.unit || '') : '';
    },
    // 跳转至详情
    toDetail(data, item) {
      const { id, processId } = data || {};
      if (!id) {
        this.$message.warn('不存在该流程');
      }
      const query = {
        processId: processId
      };
      query[item.idKey] = id;
      const routeUrl = this.$router.resolve({
        name: item.routeName,
        query
      });
      window.open(routeUrl.href, '_blank');
    },
    toList(routeName) {
      const hasRouteAuth = routeName === 'signUp' ? this.hasRouteAuth('signUp:signUp:read') : this.hasRouteAuth('crm:termination:read');
      if (!hasRouteAuth) {
        const routeUrl = this.$router.resolve({
          name: '404'
        });
        window.open(routeUrl.href, '_blank');
      } else {
        const { resourceId, platformType } = this.scope.row || {};
        const routeUrl = this.$router.resolve({
          name: routeName,
          query: {
            accountId: resourceId,
            platformId: platformType
          }
        });
        window.open(routeUrl.href, '_blank');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import './style.scss';
.expire-tag {
  display: inline-block;
  margin-left: 5px;
  border: 1px solid #FF4E5F;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
  line-height: 12px;
  color: #FF4E5F;
}
.link {
  color: #406EFF;
  cursor: pointer;
}
.row-item-label {
  display: flex;
  .content {
    max-width: 100px;
  }
}
.nowSignStatus-container {
  font-size: 12px;
  color: #406EFF;
  display: flex;
  align-items: center;
  .label {
    cursor: pointer;
  }
  .separator {
    margin: 0 2px;
  }
}
</style>
